<script setup lang="ts">
import { RouterView } from 'vue-router'
import MicroAppLoading from './components/MicroAppLoading.vue'
import AppMenu from './components/AppMenu.vue'

const microAppsStore = useMicroAppsStore()
import { useMicroAppsStore } from '@/stores/microApps'
import { onMounted, onUnmounted } from 'vue'

// 监听微应用加载状态
onMounted(() => {
  // 设置初始状态
  microAppsStore.setLoading(true)
  microAppsStore.setError(null)

  // 这里可以添加微应用加载的自定义逻辑
  const timer = setTimeout(() => {
    microAppsStore.setLoading(false)
  }, 1000)

  onUnmounted(() => {
    clearTimeout(timer)
    microAppsStore.reset()
  })
})
</script>

<template>
  <div class="app-container">
    <AppMenu />

    <el-scrollbar height="calc(100vh - 3.333rem)" class="scrollbar">
      <div class="current-app" v-if="microAppsStore.currentApp">
        当前应用: {{ microAppsStore.currentApp }}
      </div>

      <div class="main-content">
        <!-- 主应用路由视图 -->
        <RouterView />
        <!-- 微应用容器 -->
        <div id="subapp-container" class="container"></div>
        <div id="Investment-container" class="container"></div>
        <div id="jssub-container" class="container"></div>
        <div id="Mixingplant-container" class="container"></div>
        <!-- 加载状态组件 -->

        <MicroAppLoading v-if="microAppsStore.loading" />
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="less" scoped>
.scrollbar {
  width: 100%;
  height: calc(100vh - 80px) !important; // PC端菜单高度
}

.app-container {
  min-height: 100vh;
  min-width: 1200px; // PC端最小宽度
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 80px; // PC端顶部菜单高度
  width: 100%;
}

.current-app {
  position: fixed;
  top: 80px;
  right: 2rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: @border-radius[lg];
  font-size: @font-sizes[base];
  color: @colors[black];
  box-shadow: @box-shadows[md];
}

.container {
  width: 100%;
  height: 100%;
  background-color: @colors[white];
  border-radius: @border-radius[lg];
  box-shadow: @box-shadows[base];
}
</style>
